<div class="container-fluid">
    <div class="row-fluid clearfix">
        <div class="col-md-12 column">           
            <h3 class="text-center" name="reportCaption">
                智能报表
            </h3>
            <div class="btn-group group">
                <button id="search" class="btn btn-default" type="button" data-toggle="collapse">
                    <em class="glyphicon glyphicon-align-left"></em>
                </button>
                <button class="btn btn-default" type="button">
                    <em class="glyphicon glyphicon-align-center"></em>
                </button>
                <button class="btn btn-default" type="button">
                    <em class="glyphicon glyphicon-align-right"></em>
                </button>
                <button class="btn btn-default" type="button">
                    <em class="glyphicon glyphicon-align-justify"></em>
                </button>
            </div>
        </div>
    </div>
    <div class="row-fluid clearfix">
        <div class="col-sm-3 col-md-3 column collapse in" id="searchDiv">
            <div class="children" name="parameters"></div>
        </div>
        <div class="col-sm-9 col-md-9 column" id="report">
            <div class="row-fluid clearfix">
                <div class="col-md-12 column">
                    <div class="children" name="tableReport"></div>
                </div>
            </div>
            <br>
            <div class="row-fluid clearfix">
                <div class="col-md-6 column">
                    <div class="children" name="echart"></div>
                </div>
                <div class="col-md-6 column">
                    <div class="children" name="piechart"></div>
                </div>
            </div>
            <br>
            <div class="row-fluid clearfix">
                <div class="col-md-12 column">
                    <div class="children"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .group {
        margin-top: -4px;
        float: left;
    }
</style>
<script type="text/javascript">
    $(function () {
        var show = true;
        $('#search').click(function () {
            if (show) {
                $('#searchDiv').collapse('hide');
                setTimeout(function () {
                    $('#report').addClass('showed');
                }, 500);

                show = false;
            } else {
                $('#searchDiv').collapse('show');
                $('#report').removeClass('showed');
                show = true;
            }
        });
    });
</script>